import { TableHeader, tableHeaderProps } from "./type";
import TableTd from "./TableTd";
import OpsTableHeader from "./OpsTableHeader";

export default defineComponent({
	name: "OpsTable",
	props: {
		tableData: {
			type: Array<any>
		},
		title: String,
		height: String
	},
	setup(props, { slots }) {
		const tableHeader: Array<tableHeaderProps> = [];

		const slotNodes = slots.default?.();

		slotNodes?.forEach(e => {
			// @ts-expect-error
			if (e.type?.name == "OpsTableColumn") {
				tableHeader.push(new TableHeader(e.props!.props, e.props!.tableHead));
			}
		});

		return () => (
			<div className={"w-full h-full rounded-md bg-ops-card-bg-black flex flex-col "}>
				{props.title ? (
					<div className={"w-full h-full flex justify-center items-center text-md p-2"}>{props.title}</div>
				) : (
					<div></div>
				)}
				<div style={{ height: `${props.height || "100%"}` }} className={" overflow-y-scroll overflow-x-clip  w-full h-full"}>
					<table className={"border-spacing-0 border-collapse w-full h-full"}>
						<thead className={"w-full sticky top-0"}>
							<OpsTableHeader>
								{tableHeader.map(e => (
									<th align={"left"} style={{ padding: ".3em 0 .25em 1.1em" }}>
										{e.tableHead}
									</th>
								))}
							</OpsTableHeader>
						</thead>
						<tbody className={"w-full h-full"}>
							{props?.tableData?.map(e => {
								const tableDataSingleRow: any[] = [];
								tableHeader.forEach(k => {
									tableDataSingleRow.push(<TableTd>{e[k.props].toString()}</TableTd>);
								});
								// console.log(tableDataSingleRow);
								return <tr>{tableDataSingleRow}</tr>;
							})}
						</tbody>
					</table>
				</div>
			</div>
		);
	}
});
